<template>
  <div>
    app
    <h2>name1:{{ name }}</h2>
    <h2>age:{{ age }}</h2>
    <h2>skill:{{ skill }}</h2>
    <h2>aasd:{{ isAdult }}</h2>
    <button @click="$store.commit('user/setName', 'rose')">同步修改</button>
    <button @click="$store.dispatch('user/setNameAsync', 'jjjj')">
      异步修改
    </button>
  </div>
</template>

<script>
import { useStore } from 'vuex'
import { computed } from 'vue'

export default {
  setup () {
    // store就是仓库对象
    const store = useStore()

    const name = computed(() => store.state.user.name)
    return {
      name,
      age: computed(() => store.state.user.age),
      skill: computed(() => store.state.user.skill),
      isAdult: computed(() => store.getters['user/isAdult'])
    }
  }
}
</script>

<style></style>
